<template>
  <div>
    <Header :head="head" />
    <div class="search">
      <input type="text" class="text" placeholder="输入搜索的关键字" v-model="title" />
      <input type="button" value="提交查询" :disabled="show" class="button" @click="getList" />
    </div>
    <Keep v-if="!store" @func="takeNotes" @query="getList" />
    <div v-if="store">
      <h6>商家</h6>
      <list :list="List" />
    </div>
    <Load :show="show" />
    <h3 v-if="display">暂无数据</h3>
  </div>
</template>
<script>
import Header from '../common/Header' //引入头部
import { Toast } from 'mint-ui' // 引入mint-ui的提示组件
import List from '../common/List.vue' //引入展示组件
import Keep from './Keep.vue' //引入历史记录展示
import Load from '../common/Load'
export default {
  components: {
    List,
    Keep,
    Header,
    Load
  },
  data() {
    return {
      head: '搜索',
      List: [],
      display: false, //display为false '数据暂无',不显示
      title: null,
      store: false, //商家信息是否显示
      show: null
    }
  },
  methods: {
    retain() {
      //保存搜索记录
      //window.console.log(this.title)
      //从 localStorage 中获取 record 的数据或者获取一个空数组
      let record = JSON.parse(localStorage.getItem('record') || '[]')
      //输入框的类容不为空,并且缓存中没有相同类容时,把输入框类容添加进缓存
      if (!record.includes(this.title) && this.title) {
        record.unshift(this.title) //放在数组最前面
        //window.console.log(record.length)
        if (record.length > 10) record.pop()
        localStorage.setItem('record', JSON.stringify(record))
      }
    },
    getList() {
      this.retain()
      if (!this.title) {
        Toast({
          message: '请输入搜索关键字',
          duration: 1000
        })
      } else {
        this.show = 1
        let guess = JSON.parse(localStorage.getItem('guess'))
        this.$http
          .get('v4/restaurants', {
            params: {
              geohash: guess.geohash,
              keyword: this.title
            }
          })
          .then(data => {
            this.show = null
            if (data.body.type == 'ERROR_DATA') {
              this.List = []
              Toast({
                message: '加载失败',
                duration: 1000
              })
              window.console.log(data)
            } else {
              window.console.log(data.body)
              this.List = data.body
              this.judge()
              Toast({
                message: '加载成功',
                duration: 1000
              })
            }
          })
          .catch(() => {
            this.show = null
            Toast('加载失败')
            this.judge()
          })
        this.store = true
      }
    },
    judge() {
      //判断 List 是否有数据,无数据则则display为true
      if (this.List.length == 0) {
        this.display = true
      } else {
        this.display = false
      }
    },
    takeNotes(value) {
      //把点击的历史记录同步到输入框中
      this.title = value
    }
  },
  watch: {
    title: function() {
      //监视 title ,如果输入栏为空,则关闭商品展示,打开历史记录
      this.display = false
      if (!this.title) {
        this.store = false
      }
    }
  }
}
</script>
<style scoped>
.text {
  border: 1px solid #e4e4e4;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0 5px;
  margin-right: 5px;
  font-weight: bold;
  height: 10vw;
  flex: 3;
  font-size: inherit;
}
.button {
  background-color: #26a2ff;
  padding: 0;
  color: white;
  font-weight: bold;
  flex: 1;
  font-size: inherit;
  transition-duration: 0s !important; /* 这个属性在mui通用样式时0.2s,会造成button变化时有动画效果 */
}
.search {
  display: flex;
  padding: 10px;
  background-color: white;
  font-size: 5vw;
}
.mui-icon {
  position: absolute;
}
h3 {
  color: #aaa;
  text-align: center;
  padding-top: 10vw;
}
h6 {
  padding-left: 5vw;
  padding-bottom: bodom 5vw;
}
</style>